<template>
	<view>
		<view class="add">
			
			<form @submit="submit">
				<view class="item">
					<input v-model="formvalue.title" type="text" name="title" placeholder="请输入标题">
				</view>
				
				<view class="item">
					<input v-model="formvalue.author" type="text" name="author" placeholder="请输入作者">
				</view>
				
				<view class="item">
					<textarea v-model="formvalue.content" name="content" placeholder="请输入内容"></textarea>
				</view>
				<view class="item"></view>
				<uni-section title="只选择图片" type="line">
							<view class="example-body">
								<uni-file-picker limit="9" title="最多选择9张图片" auto-upload="true" 
								@success="success" v-model="imgarr" size-type="compressed"></uni-file-picker>
							</view>
				</uni-section>
				
				<view class="but">
					<button form-type="submit" type="primary" :disabled="!formvalue.title">提交</button>
					<button form-type="reset" type="warn">重置</button>
				</view>
				
			</form>
			
		</view>
		<view class="hint">
			{{formvalue.title}}
			{{pic}}
		</view>
		
	</view>
	
</template>

<script>
	let id;
	export default {
		data() {
			return {
				pic:[],
				imgarr:[],
				formvalue:{
					title:"",
					author:"",
					content:"",
					img:[]
					
				}
			};
		},
		onLoad(e) {
			id=e.id,
			console.log(e);
			this.getdetail()
		},
		methods:{
			//获取详情
			getdetail(){
				uniCloud.callFunction({
					name:"art_get_detail",
					data:{
						id
					}
				}).then(res=>{
					console.log(111,res);
					console.log(res.result.data[0]);
					this.formvalue=res.result.data[0]
					this.pic=this.formvalue.img
					if(!this.formvalue.img)
					return;
					let urls=this.formvalue.img.map(item=>{
						return {url:item}
					})
					console.log(urls);
					this.imgarr=urls
				})
			},
		// 图片上传
			success(e){
				console.log(e);
				console.log(e.tempFilePaths);
				let img=e.tempFilePaths
				let old = this.pic
				console.log(old);
				let ne = [...old,...img]
				this.pic=ne
				this.formvalue.img = ne
				console.log(ne)
			},
			//图片加载
			oldpic(){
				
			},
			//提交
			submit(e){
				let detail=e.detail.value
				uniCloud.callFunction({
					name:"art_add_row",
					data:{
						api:"update",
						detail:this.formvalue,
						newimg:this.pic
					}
				}).then(res=>{
					console.log(res);
					uni.showToast({
						icon:"success",
						title:"修改成功"
					})
					setTimeout(()=>{
						uni.navigateBack()
					},800)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.add{
	padding: 30rpx;
	.item{
		padding-bottom: 20rpx;
		
		input{
			
			border-bottom: 1rpx solid #eee;
			height: 80rpx;
			font-size: 47rpx;
			padding: 0 20rpx;
		}
		textarea{
			border-bottom: 1rpx solid #eee;
			padding: 0 20rpx;
			height: 300rpx;
		}
	}
	.but{
		// padding: 20rpx 0;
		margin: 20rpx 50rpx;
		
		button{
			margin: 20rpx;
			
		}
	}
}
.hint{
	font-size: 25rpx;
	color: #666;
}
</style>
